<template>
  <div class="bid-item-wrapper" @click="handleBidsClick">
    <img :src="bidData.image_src" />
    <div class="bid-item-content">
      <h3>{{textCut(bidData.title)}}</h3>
      <Divider />
      <Tag type="dot" :color="tagType">{{tagText}}</Tag>
      <span v-if="tagType!=='warning'">&nbsp;{{bidData.bid_count}}人已出价</span>
      <br />
      <span id="current-price">
        {{bidData.status == 0?'起拍价:':'当前价：'}}
        <span>￥{{bidData.max_price}}</span>
      </span>
 
      <br />
      <span>{{countdownText}}</span>
      <countdown
        v-if="bidData.start_time"
        :startTime="bidData.start_time"
        :endTime="bidData.end_time"
        @status="handleStatus"
      ></countdown>

      <!-- 流拍 -->
      <img
        v-if="tagType=='error' && bidData.bid_count == 0"
        src="https://gtms02.alicdn.com/tps/i2/TB1vVaRFFXXXXcdaVXX_uhd.XXX-120-67.png"
      />

      <!-- 已成交 -->
      <img
        v-else-if="tagType=='error'"
        src="https://gtms02.alicdn.com/tps/i2/TB1qfB0FpXXXXbRdFXX_uhd.XXX-120-67.png"
      />
    </div>
  </div>
</template>

<script>
import Countdown from "./Countdown";

export default {
  components: {
    Countdown
  },
  data() {
    return {
      countdownText: "",
      tagType: "primary",
      tagText: ""
    };
  },
  props: {
    bidData: Object
  },
  methods: {
    handleStatus(status) {
      switch (status) {
        case 0:
          (this.countdownText = "距开始："),
            (this.tagType = "warning"),
            (this.tagText = "未开始");
          break;
        case 1:
          (this.countdownText = "距结束："),
            (this.tagType = "success"),
            (this.tagText = "进行中");
          break;
        default:
          (this.countdownText = "结束时间："),
            (this.tagType = "error"),
            (this.tagText = "已结束");
          break;
      }
    },
    textCut: text => _.truncate(text, { length: 18 }),
    handleBidsClick() {
      this.$router.push(`/bid_goods/${this.bidData.id}`);
    }
  }
};
</script>

<style>
</style>